{% extends 'CpmJovenesBundle:Layout:admin_layout.html.twig' %}

{% block content %}

<script src="{{ asset('js/flot/jquery.flot.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/flot/jquery.flot.pie.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/flot/jquery.flot.stack.min.js') }}" type="text/javascript"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="{{ asset('js/flot/excanvas.min.js') }}"></script><![endif]-->

<div id="dashboard">

	<div class="stats-block etapas">
		<div class="etapas-banner">
			<div class="etapa-ant">{{ jym.etapaAnterior }}</div>
			<div class="etapa-act">
					<h3>Ciclo {{ jym.cicloActivo }}</h3>
					{{ jym.etapaActual }}
			</div>
			<div class="etapa-sig">{{ jym.etapaSiguiente }}</div>
		</div>	
	</div>
	
	<div class="left-stats-panel">
	
		<div class="stats-block usuarios">
				<a href=" {{ path('usuario') }}"><h3>Cantidad de participantes en el programa</h3></a>	
				<ul>
					<li>Coordinadores <div class="num-result">{{ usuarios['coordinadores'] }}</div></li>
					<li>Colaboradores <div class="num-result">{{ usuarios['colaboradores'] }}</div></li>
					<li>Alumnos <div class="num-result">{{ usuarios['alumnos'] }}</div></li>
					<li>Usuarios habilitados del sistema<div class="num-result">{{ usuarios['usuarios'] }}</div></li>
					<li>Usuarios activos el último mes <div class="num-result">{{ usuarios['usuarios_activos'] }}</div></li>
				</ul>
		</div>
			
			
		<div class="stats-block instancias">
			<a href=" {{ path('instancia') }}"><h3>Próximas instancias de eventos</h3></a>
			
			<div id="instancias_chart"></div>
			<br/>
			<table>
				<tr><th>Fecha</th><th>Evento</th><th>Lugar</th><th>Confirmados</th></tr>
				<script>
					var inscritos_data = new Array();
					var confirmados_data = new Array();
					var instancias_labels = new Array();
				</script>	
				{% for instancia in instancias['instancias'] %}
					<tr> 
						<td><a href="{{ path('instancia_show', { 'id' : instancia.id}) }}">{{ instancia.fechaInicio |date('d-m H:i')}}</a></td>
						<td><a href="{{ path('instancia_show', { 'id' : instancia.id}) }}">{{ instancia.evento }}</a></td>
						<td><a href="{{ path('instancia_show', { 'id' : instancia.id}) }}">{{ instancia.lugar }}</a></td>
						<td> 
							{% if (instancias['confirmaciones'][instancia.id] is defined) %} 
								{% set confirmaciones = instancias['confirmaciones'][instancia.id] %} 
							 {% else %} 
							 	{% set confirmaciones = 0 %}
							 {% endif %}
							<a href="{{ path('instancia_show', { 'id' : instancia.id}) }}">{{ confirmaciones }}/ {{ instancia.invitaciones | length }}</a>
						</td>					
					</tr>
					<script>
						inscritos_data.push([instancias_labels.length+1,{{ instancia.invitaciones | length }}]);
						confirmados_data.push([instancias_labels.length+1,{{ confirmaciones }}]);
						instancias_labels.push([ instancias_labels.length+1 , '{{ instancia.fechaInicio | date('d/m H:i') }}']);
					</script>
				{%  endfor %}
			</table>
			<script>
					var instancias_data = [
					                       { label: "Inscriptos", data : inscritos_data},
					                       { label: "Confirmados", data : confirmados_data}
						   					];
   					console.log(confirmados_data);
					$.plot($("#instancias_chart"), 
							instancias_data, 
							{ 
								series: {
									        lines: { show: false, fill: false },
									        points: { show: false},
									        bars: {show: true, barWidth: 0.3, align: 'center',},
				  					    },
				  				xaxis : { ticks: instancias_labels }
							 });
			</script>
		</div>
		
		<div class="stats-block correos">
				<a href="{{ path('correo') }}"><h3>Últimos correos enviados</h3></a>
					<table>
						<tr><th>Fecha</th><th>Asunto</th><th>Usuario</th></tr>
						{% for correo in correos %}
							<tr>
								<td> {{ correo.fecha |date('d-m-Y H:i:s')  }} </td>
								<td> <a href="{{path('correo_show', { 'id' : correo.id }) }}">{{ correo.asunto }}</a></td>
								<td> {{ correo.destinatario}}</td>
							</tr>	
						{% endfor %}
					</table>	
		
		</div>	
	
	</div>	
	<div class="right-stats-panel">
		<div class="stats-block proyectos">
			{% set total_proyectos = primera_vez ['total_proyectos'] %}
			<div class="estados stats-block">
				<a href=" {{ path('proyecto') }}"><h3>Proyectos</h3></a>
				<div id="proyectos_chart">
				</div>
				<ul>
					<a href=" {{ path('proyecto') }}"><li>Cantidad total de proyectos<div class="num-result">{{total_proyectos}}</div></li></a>
				{% for estado in estados %}
					<li><a href=" {{ path('proyecto_en_estado') }}?id_estado={{ estado['estado'] }}">{{ estado['estado_text'] }} <div class="num-result"> {{ estado['1'] }}</div></a></li>
				{% endfor %}
				</ul>
				<script>
						var data = new Array();
						{% for estado in estados %}
							data.push({ label: '{{ estado['estado_text'] }}', data : {{ estado['1'] }} }); 
						{% endfor %}
							
						$.plot($("#proyectos_chart"), data,{
						    series: {
						        pie: {
						            show: true
						        }
						    }
						});
				</script>
			</div>
	

			
			<div class="participantes_primera_vez stats-block">
				<h3>Proyectos con principiantes (primera vez)</h3>	
				{% set total_PrimeraVezDocente = primera_vez ['total_PrimeraVezDocente'] %}
				{% set total_PrimeraVezAlumnos = primera_vez ['total_PrimeraVezAlumnos'] %}
				{% set total_PrimeraVezEscuela = primera_vez ['total_PrimeraVezEscuela'] %}
				<div id="principiantes_chart">
				</div>
				<ul>
					{% if total_proyectos > 0 %}
					<li>Coordinadores: <div class="num-result"> {{ (100 * total_PrimeraVezDocente / total_proyectos) | number_format(2)}}% ({{total_PrimeraVezDocente}})</div></li>  
					<li>Alumnos: <div class="num-result"> {{ (100 * total_PrimeraVezAlumnos / total_proyectos) | number_format(2) }}% ({{total_PrimeraVezAlumnos}})</div></li>
					<li>Escuelas: <div class="num-result"> {{ (100 * total_PrimeraVezEscuela / total_proyectos) | number_format(2)}}% ({{total_PrimeraVezEscuela}})</div></li> 
					{% endif %}
				</ul>
				<script>
						var principiantes = new Array();
						principiantes[0] = { label : 'Primera vez', data : [[1,{{ total_PrimeraVezDocente }}],[2,{{ total_PrimeraVezAlumnos }}],[3,{{ total_PrimeraVezEscuela }}]]};
						principiantes[1] = { label : 'Más de una vez', data : [[1,{{ total_proyectos-total_PrimeraVezDocente }}],[2,{{ total_proyectos-total_PrimeraVezAlumnos }}],[3,{{ total_proyectos -total_PrimeraVezEscuela}}]]};
	
						var principiantes_options = {
						        series: {stack: 0,
						                 lines: {show: false, steps: false},
						                 bars: {show: true, barWidth: 0.3, align: 'center',},},
						        		 xaxis: {ticks: [[1,'Coordinadores'], [2,'Alumnos'], [3,'Escuelas']]},
						    };
					    
						$.plot($("#principiantes_chart"), principiantes,principiantes_options);
				</script>
			</div>
		</div>
	</div>
</div>

{% endblock %}